<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button v-if="treeData.length <= 0" @click="createNode(null)">创建
    </el-button>
    <div v-else class="filter-container">
      <el-input class="filter-item" style="width: 260px" clearable placeholder="请输入查询条件" v-model="filterText">
      </el-input>
    </div>
    <el-tree ref="tree" :data="treeData" :props="{ children: 'Children' }" :default-expand-all="true"
      :expand-on-click-node="false" :filter-node-method="filterMethod">
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <div style="flex: 1; overflow: hidden">
            <i v-if="data.IsDirectory" class="fa fa-folder text-primary t-14"></i>
            <i v-else class="fa fa-file text-success t-14"></i>
            <span class="text-bold ml-10">[{{ data.Name }}]</span>
          </div>
          <div>
            <span v-if="!data.IsDirectory" class="fa fa-pencil-square text-primary t-14 pl-10" 
              @click.prevent.stop="editNode(data)">编辑</span>
            <!-- <i class="fa fa-toggle-right text-green pl-10" aria-hidden="true" title="创建平级"
            @click.prevent.stop="createNode(data)"></i>
          <i class="fa fa-toggle-down text-yellow pl-10" aria-hidden="true" title="创建下级"
            @click.prevent.stop="createChildNode(data)"></i>
          <i class="fa fa-trash-o text-red pl-10" aria-hidden="true" title="删除"
            @click.prevent.stop="removeNode(data)"></i> -->
          </div>
        </div>
      </template>
    </el-tree>
    <zFormDialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submitNode"
      :submitLoading="submitLoading" v-model="editNodeFormVisible"></zFormDialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'

export default {
  mixins: [commonMixin],
  name: 'wcsConfigFile',
  data: function () {
    return {
      name: '配置文件',
      treeData: [],
      data: {},
      initData: {},
      fields: [
        {
          title: '文件路径',
          key: 'Path',
          required: true,
          props: {
            disabled: true,
          },
        },
        {
          title: '文件内容',
          key: 'Content',
          required: true,
          name: 'textarea',
          props: {
            rows: 15,
          },
          events: {
            change: this.fileContentChange,
          },
        },
      ],
      editNodeFormVisible: false,
      filterText: '',
    }
  },
  created: function () {
    this.refreshTree()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    data: function (val) { },
  },
  methods: {
    refreshTree() {
      this.pageLoading = true
      this.http.get(this.$api.wcsUrl + 'Wcs/ConfigFile/GetFiles')
        .then((r) => {
          this.treeData = r
          this.pageLoading = false
        })
        .catch((e) => {
          this.pageLoading = false
        })
    },
    filterMethod(value, data) {
      if (!value) return true
      return data.Name.includes(value)
    },
    editNode(data) {
      this.pageLoading = true
      this.http.post(
        this.$api.wcsUrl + 'Wcs/ConfigFile/GetConfigFile',
        {
          Path: data.Name,
          IsDirectory: data.IsDirectory,
          Content: "",
        },
      )
        .then((r) => {
          this.data = r
          this.data.id = '-1'
          this.editNodeFormVisible = true
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    fileContentChange() {
      var parsedJson = null
      try {
        parsedJson = JSON.parse(this.data.Content)
      } catch (e) {
        console.log(e)
        return this.$message.error('输入内容不是合法的JSON字符串')
      }
      this.data.Content = JSON.stringify(parsedJson, null, 2)
    },
    createNode(data) {
      if (data) {
        this.data = { ...this.initData }
        this.data.parent_id = data.parent_id
      } else {
        this.data = { ...this.initData }
      }
      this.editNodeFormVisible = true
    },
    createChildNode(data) {
      this.data = { ...this.initData }
      this.data.parent_id = data.id
      this.editNodeFormVisible = true
    },
    submitNode() {
      this.submitLoading = true
      this.http.post(this.$api.wcsUrl + 'Wcs/ConfigFile/SaveConfigFile', { ...this.data })
        .then((r) => {
          this.submitLoading = false
          this.$message.success('操作成功')
          this.editNodeFormVisible = false
          this.refreshTree()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    removeNode(data) {
      this.$confirm('确定要删除这条记录?').then(() => {
        this.pageLoading = true
        this.http.post(this.api + 'delete?id=' + data.id, {})
          .then((r) => {
            this.pageLoading = false
            this.$message.success('操作成功')
            this.refreshTree()
          })
          .catch(() => {
            this.pageLoading = false
          })
      })
    },
  },
}
</script>

<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
  padding-right: 8px;
  overflow: hidden;
}

.disabled {
  cursor: not-allowed;
}
</style>
